<template>
	<view class="content">
		<view class="article">

			<view class="title">{{detail.title}}</view>
			<view class="userinfo">
				<view class="avatar">
					<image :src="detail.avatar" mode="scaleToFill"></image>
				</view>
				<view class="info">
					<text class="username">{{detail.nickname}}</text>
					<text class="postdate">{{formatDate(detail.time)}}</text>
				</view>
			</view>
			<view class="context">
				{{detail.content}}
			</view>
			<view class="imgs">
				<image v-for="(imgurl,index) in detail.imageSrc" :src="imgurl" :key="index" mode="widthFix"></image>
			</view>

		</view>
		<view class="commentarea">
			<view class="actionbar">
				<view class="commintbtn">评论:{{comment.length}}</view>
				<view class="dianzanbtn">点赞:1</view>
			</view>
			<view class="commentlist">
				<view class="comment" v-for="(c) in comment" :key="c._id">
					<view class="commentinfo">
						<view class="c_nickname">
							<image class="c_avatar" :src="c.info.avatar" mode="aspectFill"></image> {{c.info.nickname}}
						</view>
						<text class="c_date">{{formatDate(c.create_time,"date")}}</text>
					</view>
					<view class="msg">{{c.content}}</view>
				</view>
			</view>
		</view>
		<view class="post">
			<input type="text" placeholder="写评论" @click="open">
			<view :class="isFav?'fav-active':'fav'" @click="addFav"></view>
			<view :class="isLike?'like-active':'like'"></view>
		</view>


		<view class="modal" v-show="isBoxShow">
			<view class="mask" @click="close"></view>
			<view class="sendbox" :style="{transform: `translateY(${v}rpx)`}">
				<textarea class="msg" v-model="msg" placeholder="在此输入留言内容"></textarea>
				<button class="send" @click="send">发布</button>
			</view>
		</view>

	</view>
</template>

<script>
	import formatDate from '@/utils/formatDate.js';
	import api from '@/apis/details/index.js';
	import {
		ref,
		toRefs,
		reactive,
		onMounted
	} from 'vue';
	export default {
		setup(props) {

			const id = props.id;
			const state = reactive({
				detail: {},
				comment: [],
				isBoxShow: false,
				v: 0,
				msg: "",
				isFav: false,
				isLike: false
			})

			onMounted(function() {
				getArticleDetail(id);
				getFavList(id);
			})

			//获取指定文章的详情
			const getArticleDetail = async (id) => {
				const detail = await api.get_article_detail({
					article_id: id
				});
				// console.log(detail.data.data)
				state.detail = detail.data.data;

				const comment = await api.get_comment_list({
					article_id: id
				});
				state.comment = comment.data.data;
				console.log(state.comment);
			}

			//思路没错，但是因为两个效果叠加在一起实现，所以动画就被忽略了
			//解决方案就是将两个动作分开来做。
			const open = () => {
				state.isBoxShow = true;
				setTimeout(() => {
					state.v = 0;
				}, 300)
			}
			const close = () => {
				state.v = 452;
				setTimeout(() => {
					state.isBoxShow = false;
				}, 600)
			}

			const send = async () => {

				uni.showLoading({
					title: "提交中..."
				})

				let {
					uid
				} = uni.getStorageSync("token");

				setTimeout(async () => {
					const data = await api.add_comment({
						user_id: uid,
						article_id: id,
						content: state.msg,
						comment_type: '0'
					});
					state.msg = "";

					if (data.data.code == 0) {
						uni.showToast({
							title: data.data.msg,
							success() {
								setTimeout(() => {
									getArticleDetail(id);
									close();
								}, 600)
							}
						})
					}

				}, 1000)
			}

			//获取所有收藏
			const getFavList = (id) => {
				let {
					uid
				} = uni.getStorageSync("token");
				api.get_fav_list({
					user_id: uid
				}).then(res => {
					console.log(res);
					let result = res.data.data.filter(x => x._id == id);
					if (result.length > 0) {
						state.isFav = true;
					} else {
						state.isFav = false;
					}
				})
			}

			const addFav = () => {
				let {
					uid
				} = uni.getStorageSync("token");
				if (state.isFav) {
					//取消收藏
					api.remove_fav({
						user_id: uid,
						article_id: id
					}).then(res => {
						// console.log(res);
						uni.showToast({
							title: res.data.msg
						})
					})

				} else {
					//添加收藏
					api.add_fav({
						user_id: uid,
						article_id: id
					}).then(res => {
						// console.log(res);
						uni.showToast({
							title: res.data.msg
						})
					})
				}
				state.isFav = !state.isFav;
			}

			return {
				...toRefs(state),
				formatDate,
				open,
				close,
				send,
				getFavList,
				addFav
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx 20rpx 100rpx 20rpx;

	}

	.title {
		font-size: 42rpx;
	}

	.userinfo {
		display: flex;
		padding-top: 10rpx;

		.avatar {
			flex: 1;
			width: 100%;
			height: 120rpx;
			overflow: hidden;
			border-radius: 50%;


			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			flex: 5;
			height: 120rpx;
			border-bottom: 1rpx dashed #ccc;
			padding-left: 30rpx;


			.username {
				display: block;
				font-size: $uni-font-size-sm;
				color: #919191;
				height: 60rpx;
				line-height: 60rpx;
			}

			.postdate {
				@extend .username;
			}
		}
	}

	.context {
		font-size: 32rpx;
		line-height: 1.7em;
		text-indent: 2em;
		padding-top: 25rpx;
	}

	.imgs {

		padding-top: 25rpx;
		border-bottom: 1px dashed #cccccc;

		image {
			width: 100%;
		}
	}

	.actionbar {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;

		view {
			flex: 1;
			font-size: 32rpx;
			font-weight: 900;
		}

		.commintbtn {
			text-align: left;
		}

		.dianzanbtn {
			text-align: right;
		}
	}

	.commentinfo {
		display: flex;
		padding-top: 20rpx;

		view,text {
			flex: 1;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.c_nickname {
			text-align: left;

			.c_avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
			}
		}

		.c_date {
			text-align: right;
		}
	}

	.msg {
		font-size: 32rpx;
	}

	.commentarea {
		padding-bottom: 30rpx;
		border-bottom: 1rpx dashed #cccccc;
	}

	.post {
		display: flex;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background-color: #ffffff;
		width: 100%;
		// height:100rpx;
		// line-height: 100rpx;
		padding: 30rpx 0rpx 30rpx 20rpx;

		input {
			flex: 3;
			border-radius: 44rpx;
			border: 1rpx dotted #cccccc;
			padding: 10rpx 20rpx;
		}

		view {
			flex: 1;
			background-size: 60rpx;
			background-repeat: no-repeat;

		}

		.fav-active {
			background-image: url("../../static/shoucang-active.png");
			background-position-x: 40rpx;
		}

		.fav {
			background-image: url("../../static/shoucang.png");
			background-position-x: 40rpx;
		}

		.like-active {
			background-image: url("../../static/dianzan-active.png");
		}

		.like {
			background-image: url("../../static/dianzan.png");
		}
	}

	.modal {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0px;
		left: 0px;

		.mask {
			width: 100%;
			height: 100%;
			background-color: rgba(00, 00, 00, 0.4);
			z-index: 888;
		}

		.sendbox {
			position: fixed;
			background-color: #ffffff;
			z-index: 999;
			bottom: 0rpx;
			width: 100%;

			transform: translateY(452rpx);
			transition: all 0.6s ease-out;

			textarea {
				width: 95%;
				padding: 30rpx;
			}

			button {
				background-color: #4aaf45;
				color: #ffffff;
				font-weight: 900;
				width: 95%;
			}
		}
	}
</style>
